<!doctype html> <!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
	<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<!-- DNS prefetch -->
		<link rel=dns-prefetch href="//fonts.googleapis.com">
		<!-- Use the .htaccess and remove these lines to avoid edge case issues.
		More info: h5bp.com/b/378 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		
		<title>Forms :: Peach &ndash; Clean &amp; Smooth Admin Template</title>
		<meta name="description" content="">
		<meta name="author" content="">
		
		<!-- Mobile viewport optimized: j.mp/bplateviewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1">
		
		<!-- Place favicon.ico and apple-touch-icon.png in the root directory:
		mathiasbynens.be/notes/touch-icons -->
		
		<!-- CSS -->
		<link rel="stylesheet" href="css/960gs/fluid.css"> <!-- 960.gs Grid System -->
		<!-- The HTML5-Boilerplate CSS styling -->
		<link rel="stylesheet" href="css/h5bp/normalize.css"> <!-- RECOMMENDED: H5BP reset styles -->
		<link rel="stylesheet" href="css/h5bp/non-semantic.helper.classes.css"> <!-- RECOMMENDED: H5BP helpers (e.g. .clear or .hidden) -->
		<link rel="stylesheet" href="css/h5bp/print.styles.css"> <!-- OPTIONAL: H5BP print styles -->
		<!-- The main styling -->
		<link rel="stylesheet" href="css/sprites.css"> <!-- STRONGLY RECOMMENDED: Basic sprites (e.g. buttons, jGrowl) -->
		<link rel="stylesheet" href="css/header.css"> <!-- REQUIRED: Header styling -->
		<link rel="stylesheet" href="css/navigation.css"> <!-- REQUIRED: Navigation styling -->
		<link rel="stylesheet" href="css/content.css"> <!-- REQUIRED: Content styling -->
		<link rel="stylesheet" href="css/footer.css"> <!-- REQUIRED: Footer styling -->
		<link rel="stylesheet" href="css/typographics.css"> <!-- REQUIRED: Typographics -->
		<link rel="stylesheet" href="css/ie.fixes.css"> <!-- OPTIONAL: Fixes for IE7 -->
		<!-- Sprite styling -->
		<link rel="stylesheet" href="css/sprite.forms.css"> <!-- SPRITE: Forms styling -->
		
		<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
		
		<!-- All JavaScript at the bottom, except this Modernizr build incl. Respond.js
		Respond is a polyfill for min/max-width media queries. Modernizr enables HTML5
		elements & feature detects;
		for optimal performance, create your own custom Modernizr build:
		www.modernizr.com/download/ -->
		<script src="js/libs/modernizr-2.0.6.min.js"></script>
	</head>
	
	<body>
		
		<!-- Begin of #height-wrapper -->
		<div id="height-wrapper">
			<!-- Begin of header -->
			<header>
				<!-- Begin of the header toolbar -->
				<div id="header_toolbar">
					<div class="container_12">
						<h1 class="grid_8">Peach &ndash; Clean &amp; Smooth Admin Template</h1>
						<!-- Start of right part -->
						<div class="grid_4">
							<!-- A small toolbar button -->
							<div class="toolbar_small">
								<div class="toolbutton">
									<span>3</span>
									<img src="img/icons/16x16/mail.png" width="16" height="16" alt="mail" >
								</div>
								<div class="toolbox" >
									<span class="arrow"></span>
									<h3>Your Messages</h3>
									<ul class="mail">
										<li>
											<a href="#"> <strong>10:15</strong>Need your Help!
											<small>
												From: John
											</small> </a>
										</li>
										<li>
											<a href="#"> <strong>9:55</strong>New comment on you theme
											<small>
												From: themeforest
											</small></a>
										</li>
										<li>
											<a href="#"> <strong>Yest.</strong>Successfull backup
											<small>
												From: System
											</small></a>
										</li>
										<li class="read">
											<a href="#"> <strong>2 days</strong>Bug report
											<small>
												From: Jane
											</small></a>
										</li>
									</ul>
									<a class="inbox" href="#">Go to inbox &raquo;</a>
								</div>
							</div> <!-- End of small toolbar button -->
							
							<!-- A large toolbar button -->
							<div class="toolbar_large">
								<div class="toolbutton">
									<div class="toolicon">
										<img src="img/icons/16x16/user.png" width="16" height="16" alt="user" >
									</div>
									<div class="toolmenu">
										<div class="toolcaption">
											<span>Administrator</span>
										</div>
										<!-- Start of menu -->
										<div class="dropdown">
											<ul>
												<li>
													<a href="#">Settings</a>
												</li>
												<li>
													<a href="#">Logout</a>
												</li>
											</ul>
										</div> <!-- End of menu -->
									</div>
								</div>
							</div> <!-- End of large toolbar button -->
						</div>
						<!-- End of right part -->
					</div>
				</div>
				<!-- End of the header toolbar -->
				
				<!-- Start of the main header bar -->
				<nav id="header_main">
					<div class="container_12">
						<!-- Start of the main navigation -->
						<ul id="nav_main">
							<li>
								<a href="#">
								<img src="img/icons/25x25/dark/computer-imac.png" width=25 height=25 alt="">
								Dashboard</a>
								<ul>
									<li>
										<a href="dashboard.html">Dashboard</a>
									</li>
									<li>
										<a href="404.html">404</a>
									</li>
									<li>
										<a href="login.html">Login</a>
									</li>
								</ul>
							</li>
							<li class="current">
								<a href="#">
								<img src="img/icons/25x25/dark/blocks---images.png" width=25 height=25 alt="">
								Elements</a>
								<ul>
									<li class="current">
										<a href="forms.html">Forms</a>
									</li>
									<li>
										<a href="gallery.html">Gallery</a>
									</li>
									<li>
										<a href="lists.html">Lists</a>
									</li>
									<li>
										<a href="tables.html">Tables</a>
									</li>
									<li>
										<a href="tabs.html">Tabs</a>
									</li>
									<li class="last-child">
										<a href="wizard.html">Wizard</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">
								<img src="img/icons/25x25/dark/user-comment.png" width=25 height=25 alt="">
								User Information</a>
								<ul>
									<li>
										<a href="alert_boxes.html">Alert Boxes</a>
									</li>
									<li>
										<a href="messages.html">Messages (Fallr)</a>
									</li>
									<li>
										<a href="notifications.html">Notifications</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">
								<img src="img/icons/25x25/dark/robot.png" width=25 height=25 alt="">
								Plugins</a>
								<ul>
									<li>
										<a href="charts.html">Charts</a>
									</li>
									<li>
										<a href="calendar.html">Calendar</a>
									</li>
									<li>
										<a href="explorer.html">Explorer</a>
									</li>
									<li>
										<a href="editor.html">Rich Text Editor</a>
									</li>
									<li>
										<a href="tooltips.html">Tooltips</a>
									</li>
								</ul>
							</li>
						</ul>
						<!-- End of the main navigation -->
					</div>
				</nav>
				<div id="nav_sub"></div>
			</header>
			
			<!-- Start of the content -->
			<div role="main" class="container_12" id="content-wrapper">
				
				<!-- Start of the main content -->
				<div id="main_content">
				
					<h2 class="grid_12">Forms</h2>
					<div class="clean"></div>
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="img/icons/packs/fugue/16x16/ui-text-field-format.png" alt="" width="16"
								height="16">
								<h3>Form</h3>
								<span></span>
							</div>
							<form class="validate" novalidate action="" method="get">
								<div class="content">
									<div class="_50">
										<p>
											<input name="username" type="text" placeholder=" Your Name" class="required" />
										</p>
									</div>
									<div class="_50">
										<p>
											<input name="email" type="email" placeholder=" Your E-Mail" class="required" />
										</p>
									</div>
									<div class="_100">
										<p>
											<label>
												Where are you from?
											</label>
											<select name="from" class="required">
												<option></option>
												<option>Europe</option>
												<option>America</option>
												<option>Asia</option>
												<option>Africa</option>
											</select>
										</p>
									</div>
									<div class="_50">
										<p>
											<label for="newsletter">
												<input name="newsletter" type="checkbox" class="required" />
												Recieve newsletter?
											</label>
										</p>
									</div>
									<div class="_50">
										<p>
											<span class="label">Newsletter type:</span>
											<label>
												<input name="htmltext" type="radio" class="required"/>
												Email
											</label>
											<label>
												<input name="htmltext" type="radio" class="required"/>
												HTML
											</label>
										</p>
									</div>								
								</div>
								<div class="actions">
									<div class="actions-left">
										<input type="reset" />
									</div>
									<div class="actions-right">
										<input type="submit" />
									</div>
								</div>
							</form>
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="img/icons/packs/fugue/16x16/application-form.png" alt="" width="16"
								height="16">
								<h3>Form with Alternative Style</h3>
								<span></span>
							</div>
							<form class="validate">
								<div class="content no-padding">
									<div class="section _100">
										<label>
											Text field
										</label>
										<div>
											<input class="required" name="text">
										</div>
									</div>
									<div class="section _100">
										<span class="label">Newsletter type</span>
										<div>
											<div class="input">
												<label>
													<input name="htmltext" type="radio"/>
													Email
												</label>
												<label>
													<input name="htmltext" type="radio"/>
													HTML
												</label>
											</div>
										</div>
									</div>
									<div class="section _100">
										<label>
											Text field
										</label>
										<div>
											<input class="required" name="text2">
										</div>
									</div>
									<div class="section _100">
										<label>
											Color selection
										</label>
										<div>
											<input name="color" type="color">
										</div>
									</div>
								</div>
								<div class="actions">
									<div class="actions-left">
										<input type="reset" />
									</div>
									<div class="actions-right">
										<input type="submit" />
									</div>
								</div>
							</form>
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					<div class="clear"></div>
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="img/icons/packs/fugue/16x16/task-select-first.png" alt="" width="16"
								height="16">
								<h3>Form with Fieldsets</h3>
								<span></span>
							</div>
							<form method="get" action="" class="validate">
								<div class="content">
									<fieldset>
										<legend>
											Fieldset #1
										</legend>
										<div class="_50">
											<p>
												<label for="textfield1">
													Textfield #1
												</label>
												<input type="text" value="" class="required" name="textfield1" class="text">
											</p>
										</div>
										<div class="_50">
											<p>
												<label for="textfield2">
													Textfield #2
												</label>
												<input type="text" value="" name="textfield2" class="text">
											</p>
										</div>
										<div class="_100">
											<p>
												<label for="textfield2">
													Textfield #3
												</label>
												<input type="text" value="" class="required" name="textfield2" class="text">
											</p>
										</div>
									</fieldset>
									<fieldset>
										<legend>
											Fieldset #2
										</legend>
										<p class="inline-small-label">
											<label for="field4">
												Textfield #4
											</label>
											<input type="text" name="field4" class="text">
										</p>
										<p class="inline-small-label">
											<label for="field5">
												Textfield #5
											</label>
											<input type="text" name="field5" class="text">
										</p>
									</fieldset>
								</div>
								<div class="actions">
									<div class="actions-left">
										<input type="reset">
									</div>
									<div class="actions-right">
										<input type="submit">
									</div>
								</div>
							</form>
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="img/icons/packs/fugue/16x16/grid.png" alt="" width="16"
								height="16">
								<h3>Grid</h3>
								<span></span>
							</div>
							<div class="content">
								<form method="post" action="" class="form" id="form">
									<div class="_100">
										<p>
											<label for="100">
												100%
											</label>
											<input type="text" value="" id="100" class="text">
										</p>
									</div>
									<div class="_50">
										<p>
											<label for="50">
												50%
											</label>
											<input type="text" value="" id="50" class="text">
										</p>
									</div>
									<div class="_50">
										<p>
											<label for="50">
												50%
											</label>
											<input type="text" value="" id="50" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
									<div class="_75">
										<p>
											<label for="75">
												75%
											</label>
											<input type="text" value="" id="75" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
								</form>
							</div> <!-- End of .content -->
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					<div class="clear"></div>
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="img/icons/packs/fugue/16x16/layer-shape-line.png" alt="" width="16"
								height="16">
								<h3>Inline Form</h3>
								<span></span>
							</div>
							<div class="content">
								<p class="inline-label">
									<label for="field1">
										Inline Label
									</label>
									<input type="text" name="field1">
								</p>
								<p class="inline-medium-label">
									<label for="field2">
										Medium Label
									</label>
									<input type="text" name="field2">
								</p>
								<p class="inline-small-label">
									<label for="field3">
										Small Label
									</label>
									<input type="text" name="field3">
								</p>
								<p class="inline-mini-label">
									<label for="field4">
										Mini Label
									</label>
									<input type="text" name="field4">
								</p>
							</div> <!-- End of .content -->
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					
				</div> <!-- End of #main_content -->
				<div class="clear"></div>
					
			</div> <!-- End of #content-wrapper -->
			<div class="clear"></div>
				
		</div> <!-- End of #height-wrapper -->
			
		<!-- Start of footer-->
		<footer>
			<div class="container_12">
				Copyright &copy; 2011 YourCompany, all rights reserved.
				<div id="button_bar">
					<ul>
						<li>
							<span><a href="dashboard.html">Dashboard</a></span>
						</li>
						<li>
							<span><a href="#">Settings</a></span>
						</li>
					</ul>
				</div>
			</div>
		</footer><!-- End of footer-->
		
		
		<!-- JavaScript at the bottom for fast page loading -->
		<!-- Grab Google CDN's jQuery + jQueryUI, with a protocol relative URL; fall back to local -->

		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.4.js"><\/script>')</script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
		<script>window.jQuery.ui || document.write('<script src="js/libs/jquery-ui-1.8.16.min.js"><\/script>')</script>
		
		<!-- scripts concatenated and minified via build script -->
		<script defer src="js/plugins.js"></script> <!-- REQUIRED: Different own jQuery plugnis -->
		<script defer src="js/mylibs/jquery.ba-resize.js"></script> <!-- RECOMMENDED when using sidebar: page resizing -->
		<script defer src="js/mylibs/jquery.easing.1.3.js"></script> <!-- RECOMMENDED: box animations -->
		<script defer src="js/mylibs/jquery.validate.js"></script>
		<script defer src="js/mylibs/jquery.checkbox.js"></script>
		<script defer src="js/mylibs/jquery.chosen.js"></script>
		<script defer src="js/mylibs/jquery.placeholder.js"></script>
		<script defer src="js/mylibs/jquery.miniColors.js"></script>
		<script defer src="js/mylibs/jquery.ui.touch-punch.js"></script> <!-- RECOMMENDED: touch compatibility -->
		<script defer src="js/script.js"></script> <!-- REQUIRED: Generic scripts -->
		<!-- end scripts -->
		
		<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to
		support IE 6.
		chromium.org/developers/how-tos/chrome-frame-getting-started -->
		<!--[if lt IE 7 ]>
		<script defer
		src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
		<script
		defer>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
		<![endif]-->
	</body>
</html>
